// 前卫主机详细界面
<template>
  <div class="big_box bg-f2">
    <div class="bg-f2 bg-fff">
      <!-- 网络状态 -->
      <el-row>
        <el-col :span="18">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item><span @click="goBack" style="font-weight: 500; font-size: 18px; cursor: pointer">前卫主机配置</span></el-breadcrumb-item>
            <el-breadcrumb-item>
              <span style="color: #1989fa; font-size: 18px; font-weight: 400">{{ zcmc }}</span>
            </el-breadcrumb-item>
          </el-breadcrumb>
        </el-col>
        <el-col :span="6" align="right">
          <!-- 网络状态 -->
          <div v-if="Number(list.laniotzt) === 1 || Number(list.laniotzt) === 2">
            <!-- 1LAN/IoT在线    2LAN/IoT不在线-->
            <el-tooltip class="item" effect="dark" content="LAN网络" placement="top-start">
              <svg class="iconfont wlzt" aria-hidden="true">
                <use :xlink:href="`#${Number(list.laniotzt) === 1 ? 'el-icon-myLAN_network' : 'el-icon-myLAN_Nonetwork'}`" style="font-size: 50px" />
              </svg>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="IoT网络" placement="top-start">
              <svg class="iconfont wlzt" aria-hidden="true">
                <use :xlink:href="`#${Number(list.laniotzt) === 1 ? 'el-icon-myIoT_network' : 'el-icon-myIoT_Nonetwork'}`" style="font-size: 50px" />
              </svg>
            </el-tooltip>
          </div>
          <div v-else>
            <!-- 3LAN在线    4IoT在线 -->
            <el-tooltip class="item" effect="dark" content="LAN网络" placement="top-start">
              <svg class="iconfont wlzt" aria-hidden="true">
                <use :xlink:href="`#${Number(list.laniotzt) === 3 ? 'el-icon-myLAN_network' : 'el-icon-myLAN_Nonetwork'}`" style="font-size: 50px" />
              </svg>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="IoT网络" placement="top-start">
              <svg class="iconfont wlzt" aria-hidden="true">
                <use :xlink:href="`#${Number(list.laniotzt) === 4 ? 'el-icon-myIoT_network' : 'el-icon-myIoT_Nonetwork'}`" style="font-size: 50px" />
              </svg>
            </el-tooltip>
          </div>
        </el-col>
      </el-row>
      <!-- tab栏目 -->
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <!-- <el-tab-pane :label="item.name" :name="item.path" v-for="item in jurisdiction" :key="item.name">
          <router-view v-if="activeName === item.path"></router-view>
        </el-tab-pane>-->
        <el-tab-pane label="主机状态" name="main">
          <router-view v-if="activeName === 'main'"></router-view>
        </el-tab-pane>
        <el-tab-pane label="通道信息配置" name="role">
          <router-view v-if="activeName === 'role'"></router-view>
        </el-tab-pane>
        <el-tab-pane label="通用配置" name="auto">
          <router-view v-if="activeName === 'auto'"></router-view>
        </el-tab-pane>
        <el-tab-pane label="网络配置" name="network">
          <router-view v-if="activeName === 'network'"></router-view>
        </el-tab-pane>
        <el-tab-pane label="上报内容配置" name="reported">
          <router-view v-if="activeName === 'reported'"></router-view>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>
import { setUrl, getUrl } from '@/utils/getUrl.js'
// import { zhuJiUrl } from '@/utils/allUrl.js'
export default {
  data: function () {
    return {
      activeName: 'main',
      // jurisdiction: [
      // {
      //   name: '通用配置',
      //   path: 'auto'
      // },
      // {
      //   name: '网络配置',
      //   path: 'network'
      // },
      // {
      //   name: '通道信息配置',
      //   path: 'role'
      // },
      // {
      //   name: '主机状态',
      //   path: 'main'
      // },
      // {
      //   name: '上报内容配置',
      //   path: 'reported'
      // }
      // ],
      zcmc: '',
      R_0003000c: 0,
      R_0003000d: 0,
      list: {},
      username: '',
    }
  },
  watch: {
    // 监听url中的hash值的变化
    $route(to, from) {
      const hashUrl = window.location.hash.substr(2)
      if (hashUrl.startsWith('auto')) {
        this.activeName = 'auto'
      } else if (hashUrl.startsWith('network')) {
        this.activeName = 'network'
      } else if (hashUrl.startsWith('role')) {
        this.activeName = 'role'
      } else if (hashUrl.startsWith('main')) {
        this.activeName = 'main'
      } else if (hashUrl.startsWith('reported')) {
        this.activeName = 'reported'
      }
    },
  },
  created: function () {
    this.initAddItem(localStorage.getItem('SN')) // 网络状态
    // const menus = JSON.parse(getUrl('menus')) // 左侧菜单栏
    // menus.forEach((item) => {
    //   const a = item.children.find((item2) => item2.qxfwlj === '/mainboard')
    //   if (a) {
    //     this.activeName = a.children[0].qxfwlj
    //     let obj = {}
    //     a.children.forEach((item) => {
    //       obj = {
    //         name: item.qxmc,
    //         path: item.qxfwlj,
    //       }
    //       this.jurisdiction.push(obj)
    //     })
    //   }
    // })
    this.zcmc = localStorage.getItem('zcmc')
    // 判断本地存储中是否有地址
    let url = getUrl('mainBoardUrl')
    // if (!url) return (this.activeName = this.jurisdiction[0].path)
    if (!url) {
      url = 'main'
      setUrl('mainBoardUrl', url)
    }
    this.activeName = url
    if (!localStorage.getItem('zcmc')) {
    }
  },
  methods: {
    // parentFn(payload) {
    //   console.log(payload)
    // },
    goBack() {
      // console.log('---------------------', this.$route.query)
      // :to="{ path: '/mainboard' }"
      this.$router.push({
        name: 'mainboardList',
        // name: 'mainboard',
        params: {
          wlztValue: this.$route.query.wlztValue,
          deviceIp: this.$route.query.deviceIp,
        },
      })
    },
    handleClick(tab, event) {
      var params = ''
      if (JSON.stringify(this.$route.query) !== '{}') {
        params = `?wlztValue=${this.$route.query.wlztValue}&deviceIp=${this.$route.query.deviceIp}`
      }
      setUrl('mainBoardUrl', tab.name)
      switch (tab.name) {
        case 'auto':
          // this.$router.push('/auto')
          this.$router.push('/auto/one' + params)
          break
        case 'network':
          this.$router.push('/network' + params)
          break
        case 'role':
          this.$router.push('/role' + params)
          break
        case 'main':
          this.$router.push('/main' + params)
          break
        case 'reported':
          this.$router.push('/reported' + params)
          break
        default:
      }
      // if (tab.name === 'auto') {
      //   this.$router.push('/auto')
      // } else if (tab.name === 'network') {
      //   this.$router.push('/network')
      // } else if (tab.name === 'role') {
      //   this.$router.push('/role')
      // } else if (tab.name === 'main') {
      //   this.$router.push('/main')
      // } else if (tab.name === 'reported') {
      //   this.$router.push('/reported')
      // }
      this.initAddItem(localStorage.getItem('SN')) // 网络状态
    },
    // 网络状态函数
    // async initAddItem(sn) {
    //   const params = new URLSearchParams()
    //   params.append('userId', JSON.parse(getUrl('userconter')).id)
    //   params.append('SBXLH', sn)
    //   const { data: res } = await this.$http.post(ziC + 'zcgl/selectZiChan', params)
    //   if (res.code !== '0000') {
    //     return
    //   }
    //   this.list = res.data.list[0]
    // },

    // 获取列表网络状态
    async initAddItem(sns) {
      // console.log(zhuJiUrl)
      const { data: res } = await this.$http.get(`api/host/selectHostNETStatusBySN?snStr=${sns}`)
      if (res.code !== '0000') {
        return
      }
      this.list = { laniotzt: res.data[sns] }
    },
  },
  destroyed: function () {
    // 默认
    setUrl('mainBoardUrl', '')
  },
}
</script>

<style lang="scss" scoped>
$c333333: #333333;
$c7F7F7F: #7f7f7f;
.el-breadcrumb {
  padding: 15px 0;
}
.big_box {
  box-sizing: border-box;
  background-color: #f2f2f2;
}
.home-container .tabs_big {
  padding-left: 0 !important;
}
::v-deep .el-breadcrumb .el-breadcrumb__inner {
  font-weight: 500;
  font-size: 18px;
  .el-breadcrumb__separator {
    font-size: 14px;
  }
}
.iconfont {
  width: 20px;
  height: 20px;
  padding: 15px 10px;
  padding-left: 0;
}
</style>
